<template>
  <el-card>
    <div class="header-bar">
      <span class="title">物资统计分析</span>
      <el-radio-group v-model="dateType" size="small" style="margin-right:10px;">
        <el-radio-button label="day">日</el-radio-button>
        <el-radio-button label="month">月</el-radio-button>
        <el-radio-button label="year">年</el-radio-button>
      </el-radio-group>
      <el-select v-model="warehouse" size="small" style="width:130px;margin-right:10px;">
        <el-option label="全部库房" value="" />
        <el-option v-for="w in warehouseOptions" :key="w" :label="w" :value="w" />
      </el-select>
      <el-button type="primary" size="small" @click="exportExcel">导出Excel</el-button>
      <el-button size="small" @click="downloadImage">下载图表图片</el-button>
    </div>
    <v-chart ref="chartRef" :option="chartOption" autoresize style="height:420px;width:100%;" />
  </el-card>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'
import VChart from 'vue-echarts'

// 控件状态
const dateType = ref('day')
const warehouse = ref('')

// 库房选项
const warehouseOptions = ['总库房', '住院部库房', '门诊库房']

// 物资统计模拟数据（不同日期维度、不同库房）
const statDataMap = {
  day: {
    '': [
      { name: '注射器', value: 32 },
      { name: '手套', value: 28 },
      { name: '纱布', value: 15 },
      { name: '口罩', value: 25 },
      { name: '棉签', value: 12 }
    ],
    '总库房': [
      { name: '注射器', value: 18 },
      { name: '手套', value: 10 },
      { name: '纱布', value: 6 },
      { name: '口罩', value: 14 },
      { name: '棉签', value: 4 }
    ],
    '住院部库房': [
      { name: '注射器', value: 7 },
      { name: '手套', value: 12 },
      { name: '纱布', value: 5 },
      { name: '口罩', value: 7 },
      { name: '棉签', value: 5 }
    ],
    '门诊库房': [
      { name: '注射器', value: 7 },
      { name: '手套', value: 6 },
      { name: '纱布', value: 4 },
      { name: '口罩', value: 4 },
      { name: '棉签', value: 3 }
    ]
  },
  month: {
    '': [
      { name: '注射器', value: 180 },
      { name: '手套', value: 158 },
      { name: '纱布', value: 125 },
      { name: '口罩', value: 130 },
      { name: '棉签', value: 101 }
    ],
    '总库房': [
      { name: '注射器', value: 90 },
      { name: '手套', value: 58 },
      { name: '纱布', value: 28 },
      { name: '口罩', value: 60 },
      { name: '棉签', value: 41 }
    ],
    '住院部库房': [
      { name: '注射器', value: 48 },
      { name: '手套', value: 57 },
      { name: '纱布', value: 44 },
      { name: '口罩', value: 38 },
      { name: '棉签', value: 34 }
    ],
    '门诊库房': [
      { name: '注射器', value: 42 },
      { name: '手套', value: 43 },
      { name: '纱布', value: 53 },
      { name: '口罩', value: 32 },
      { name: '棉签', value: 26 }
    ]
  },
  year: {
    '': [
      { name: '注射器', value: 1200 },
      { name: '手套', value: 1050 },
      { name: '纱布', value: 1010 },
      { name: '口罩', value: 1160 },
      { name: '棉签', value: 900 }
    ],
    '总库房': [
      { name: '注射器', value: 450 },
      { name: '手套', value: 210 },
      { name: '纱布', value: 150 },
      { name: '口罩', value: 380 },
      { name: '棉签', value: 120 }
    ],
    '住院部库房': [
      { name: '注射器', value: 380 },
      { name: '手套', value: 440 },
      { name: '纱布', value: 410 },
      { name: '口罩', value: 350 },
      { name: '棉签', value: 290 }
    ],
    '门诊库房': [
      { name: '注射器', value: 370 },
      { name: '手套', value: 400 },
      { name: '纱布', value: 450 },
      { name: '口罩', value: 430 },
      { name: '棉签', value: 490 }
    ]
  }
}

// 饼图配置
const chartOption = computed(() => {
  const data = statDataMap[dateType.value][warehouse.value || ''] || []
  return {
    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
    legend: { top: '5%', left: 'center' },
    series: [
      {
        name: '物资类别',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}\n{c} ({d}%)',
          fontSize: 14
        },
        emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
        data
      }
    ]
  }
})

// 导出Excel
function exportExcel() {
  const data = [['物资类别', '数量']]
  const raw = statDataMap[dateType.value][warehouse.value || ''] || []
  for (const row of raw) {
    data.push([row.name, row.value])
  }
  const ws = XLSX.utils.aoa_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '物资统计')
  XLSX.writeFile(wb, '物资统计分析_' + dateType.value + '.xlsx')
  ElMessage.success('已导出Excel')
}

// 下载图表图片
const chartRef = ref(null)
function downloadImage() {
  nextTick(() => {
    const chartInstance = chartRef.value?.chart
    if (!chartInstance) {
      ElMessage.error('图表实例未初始化')
      return
    }
    const imgData = chartInstance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' })
    const a = document.createElement('a')
    a.href = imgData
    a.download = '物资统计图.png'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    ElMessage.success('图表已下载')
  })
}
</script>

<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
}
</style>
